<template>
	<view class="container">
		<view class="forum_box">
			<view>
				<view class="user_name">
					<view class="name_icon">
						<!-- {{suggestions.userName.split("")[0].toUpperCase()}} -->
						<image :src="userPhoto" style="width: 100%;height:100%" class="name_icon" />
					</view>
					<view class="name_center">
						<view class="name_text">{{suggestions.userName}}</view>
						<view>
							<view class="name_details">{{suggestions.communityName}}</view>
							<view class="name_details"> {{suggestions.createDate.replace(/T/," ").split(".")[0]}}</view>
						</view>
					</view>
					<view>
						<view class="suggest_tag">
							{{suggestions.tagName}}
						</view>
					</view>
				</view>
				<view class="forum_content">
					{{suggestions.title}}
				</view>
				<view class="forum_details">
					{{suggestions.content}}
				</view>
			</view>
			<view class="forum_photo_box">
				<view class="photo_item" v-for="(item,index) in suggestions.imgList" :key="index">
					<image :src="item.url" style="height: 100%;width: 100%;" @click="previewImg(suggestions,index)">
					</image>
				</view>
			</view>
		</view>
		<view class="comment_title">
				<view>受理结果</view>
				<view class="comment_tag" v-if="suggestions.state == '22'">已受理</view>
				<view class="comment_tag" v-if="suggestions.state == '11'">未受理</view>
				<view class="comment_tag" v-if="suggestions.state == '33'">暂不受理</view>
			</view>
		<view class="comment_box" v-if="suggestions.state == '22'">
			<view class="comment_right">
				<view class="comment_con">
					<view class="user_name_text">
						{{comment.personInCharge}}
					</view>
					<view class="comment_text">
						{{comment.describe}}
					</view>
				</view>
				<view class="comment_time">{{comment.createDate}}</view>
			</view>
		</view>
		<view style="text-align: center;color: #777777;padding:10upx;line-height: 40upx;" v-else>暂无回复</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				userPhoto: '',
				suggestions: {
					userName: '',
					communityName: '',
					createDate: '',
					tagTypeName: '',
					title: '',
					content: ''
				},
				comment: {}
			}
		},
		onLoad(option) {
			this.userPhoto = this.userInfo.photoUrl
			// this.suggestions = JSON.parse(decodeURIComponent(option.suggestions));
			this.getDetailById(option.id)
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			getDetailById(id) {
				let params = {
					"id": id
				}
				this.$api.request.getDetailById(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.suggestions = res.body.data.eventEntity
						this.comment = res.body.data.feedbackEntity
						console.log(res.body)

					}
				})
			},
			previewImg(items, index) {
				let _this = this;
				let imgsArray = items.imgList;
				let imgsArrayList = [];
				for (var i = 0; i < imgsArray.length; i++) {
					imgsArrayList.push(imgsArray[i].url);
				}
				uni.previewImage({
					current: index,
					urls: imgsArrayList
				});
			},
		}
	}
</script>

<style>
	.container {
		width: 100%;
		height: 100%;
		background-color: #FBFBFB;
	}

	.forum_box {
		width: 100%;
		padding: 20upx 3% 30upx 3%;
		margin-bottom: 16upx;
		background-color: white;
	}

	.user_name {
		width: 100%;
		/* 	height: 60upx; */
		line-height: 60upx;
		display: flex;
		flex-direction: row;
	}

	.name_icon {
		width: 80upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 50upx;
		background-color: #5FBCF0;
		color: white;
		text-align: center;
		font-weight: lighter;
		font-size: 28upx;
	}

	.name_center {
		width: 500upx;
	}

	.name_text {
		margin-left: 20upx;
		font-size: 28upx;
		font-weight: 600;
		height: 40upx;
		line-height: 40upx;
	}

	.name_details {
		float: left;
		font-size: 22upx;
		height: 40upx;
		line-height: 40upx;
		color: #999999;
		margin-left: 20upx;
	}

	.margin20 {
		margin-left: 20upx;
	}

	.complaint_tag {
		width: 120upx;
		height: 40upx;
		border: 2upx solid #D5514A;
		color: #D5514A;
		font-size: 24upx;
		line-height: 40upx;
		text-align: center;
		border-radius: 10upx;
		margin-left: auto;
	}

	.suggest_tag {
		width: 120upx;
		height: 40upx;
		border: 2upx solid #55aaff;
		color: #55aaff;
		font-size: 24upx;
		line-height: 40upx;
		text-align: center;
		border-radius: 10upx;
		margin-left: auto;
	}

	.praise_tag {
		width: 120upx;
		height: 40upx;
		border: 2upx solid #63D95D;
		color: #63D95D;
		font-size: 24upx;
		line-height: 40upx;
		text-align: center;
		border-radius: 10upx;
		margin-left: auto;
	}

	.forum_content {
		width: 100%;
		font-size: 26upx;
		margin-top: 20upx;
		font-weight: bold;
	}

	.forum_details {
		width: 100%;
		font-size: 26upx;
		margin-top: 20upx;
		color: #666666;
	}

	.forum_photo_box {
		width: 100%;
		margin-top: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap
	}

	.photo_item {
		width: 156upx;
		height: 156upx;
		margin-bottom: 15upx;
		margin-right: 20upx;
		border-radius: 8upx;
	}

	.forum_time {
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.text_input {
		height: 60upx;
		border: 1px solid white;
		border-radius: 30upx;
		background-color: #d5d5d5;
	}

	input {
		padding-left: 30upx
	}

	.comment_box {
		width: 100%;
		padding: 0 3%;
		background-color: white;
		display: flex;
		flex-direction: row;
	}

	.comment_right {
		width: 100%;
		margin-top: 20upx;

	}

	.comment_con {
		width: 100%;
		background-color: #eeeeee;
		padding: 10upx 20upx;
		border-radius: 10upx;
	}

	.user_name_text {
		height: 40upx;
		line-height: 40upx;
		width: 100%;
		font-weight: bold;
	}

	.comment_text {
		margin-top: 15upx;
		line-height: 40upx;
		color: #666666;
		font-size: 24upx;
	}

	.comment_time {
		height: 60upx;
		font-size: 24upx;
		color: #929292;
		line-height: 60upx;
		margin-left: 10upx;
	}

	.comment_tag {
		/* border: 2upx solid #63D95D; */
		color: #63D95D;
		border-radius: 10upx;
		text-align: center;
		width: 120upx;
		height: 40upx;
		line-height: 40upx;
		margin-top: 20upx;
	}

	.comment_title {
		background-color: white;
		padding: 0 30upx;
		height: 80upx;
		line-height: 80upx;
		font-size: 30upx;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>
